<template>
	<view>
		<!-- 留言 -->
		<view class="head-back">
			<u-icon name="arrow-leftward" color="#000" size="32"></u-icon>
			<view class="comments">评论({{ songs.commentCount }})</view>
			<view class="share"><u-icon name="share" color="#000" size="32"></u-icon></view>
		</view>
		<view class="cover">
			<image class="img" :src="coverimg" mode=""></image>
			<view class="title">{{ songs.name }}</view>
		</view>
		<!-- 	导航 -->
		<view class="nav">
			<view class="nav-1">推荐</view>
			<view class="nav-1">热度</view>
			<view class="nav-1">最新</view>
		</view>
		<!-- 	/内容 -->
		<view class="comments-head">
			<view v-for="(items, index) in commentslist" :key="items.name">
				<view class="media">
					<image class="img" :src="items.user.avatarUrl" mode=""></image>
					<view class="title-item">
						{{ items.user.nickname }}
						<!-- //时间 -->
						<view>{{ items.time | dateFormat }}</view>
					</view>
				</view>
				<view class="content-item">
					{{ items.content }}
					<view class="like"><u-icon name="thumb-up" color="#000" size="30"></u-icon></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { playlist_msg, song_palylist } from '@/network/https/api.js'; //请求
import { dateFormat } from '../../utils/time.js';
export default {
	data() {
		return {
			commentslist: '', //留言
			coverimg: '', //图
			songs: '', //歌
			id: '', //传过来歌单的id
			totalPage: 1, //有几页
			pageSize: 50, //每页几条
			currentPage: 0 //当前页数
		};
	},
	onLoad(val) {
		//接收传过来的id
		this.id = val.id;
		//id
		this.Comment(val.id);
		this.playlist(val.id);
	},
	//底部请求
	onReachBottom(val) {
		if (this.currentPage >= this.totalPage) return;
		console.log('进行下一页请求');
		uni.showLoading({
			title: '加载中',
			mask:true,
		});
		setTimeout(function () {
			uni.hideLoading();
		}, 1000);
		this.Comment(val.id);
	},
	methods: {
		//留言
		async Comment() {
			const param = {
				id: this.id,
				limit: this.pageSize,
				offset: this.currentPage
			};
			const { data: res } = await playlist_msg(param.id, param.limit, param.offset);
			this.currentPage += 10; //加一页
			this.totalPage = res.total; //有几页
			this.commentslist = [...this.commentslist, ...res.comments];
			console.log(res);
		},
		//歌曲
		async playlist(id) {
			const param = {
				s: 8,
				id: id
			};
			const { data: res } = await song_palylist(param.id, param.s);
			this.coverimg = res.playlist.coverImgUrl;
			this.songs = res.playlist;
			console.log('歌单', res);
		}
	},
	//时间处理
	filters: {
		dateFormat(value) {
			let date = new Date();
			return dateFormat('YYYY年mm月dd日HH时', date);
		}
	},
	computed: {}
};
</script>

<style lang="scss" scoped>
.head-back {
	width: 700rpx;
	display: flex;
	margin-top: 30rpx;
	margin-left: 30rpx;
	position: relative;
	top: 20rpx;
	.comments {
		margin-left: 30rpx;
		position: relative;
		top: 10rpx;
	}
	.share {
		display: flex;
		flex: 2;
		justify-content: flex-end;
	}
}
.cover {
	display: flex;
	margin-top: 30rpx;
	position: relative;
	top: 50rpx;
	left: 50rpx;
	.img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.title {
		margin-left: 39rpx;
		position: relative;
		top: 50rpx;
	}
}
.nav {
	position: relative;
	top: 100rpx;
	left: 150rpx;
	display: flex;
	.nav-1 {
		margin-left: 30rpx;
	}
}
.comments-head {
	display: flex;
	flex-direction: column;
	margin-top: 130rpx;
	.media {
		display: flex;
		margin-top: 20rpx;
		margin-left: 50rpx;
	}
	.img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
	}
	.title-item {
		font-size: 23rpx;
		margin-left: 20rpx;
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.content-item {
	margin-left: 160rpx;
	width: 450rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	.like {
		// display: flex;
		// flex: 2;
		// margin-left: 30rpx;
		// justify-content: flex-end;
		// align-items: center;
		// position: relative;
		// bottom: 30rpx;
	}
}
</style>
